<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.mongodb.client.MongoCursor,org.bson.Document" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>教学材料类型列表</title>
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
	<%MongoCursor<Document> materialsList = (MongoCursor<Document>)request.getAttribute("result");%>
	<jsp:include page="../navbar.html" />
	<div class="container-fluid">
		<div class="row mt20">
			<div class="col-md-10 col-md-offset-1">
			<div class="row">
					<div class="pull-right col-md-4" style="margin-top:-10px">
						<form action="teachingMaterialsServlet" method="post" class="form-horizontal">
							<div class="input-group">
						       <input class="form-control radius-clear" type="text" name="value" value="<%=request.getAttribute("queryvalue")==null?"":request.getAttribute("queryvalue") %>" placeholder="搜素" style="width:70%;" />
						       <select class="form-control" style="width:30%;" name="name">
						          <option value="teachername" <%="teachername".equals(request.getAttribute("queryname"))?"selected":"" %>>教师姓名</option>
						          <option value="courseclassname" <%="courseclassname".equals(request.getAttribute("queryname"))?"selected":"" %>>课程</option>
						          <option value="yearsemester" <%="yearsemester".equals(request.getAttribute("queryname"))?"selected":"" %>>学年学期</option>
						       </select>								 
						       <span class="input-group-btn">
						          <button class="btn btn-default" type="submit" name="method" value="query">
						             <strong><em class="fa fa-search"></em></strong>
						          </button>
						       </span>
						    </div>
						</form>
					</div>
				</div>
			<%if(!materialsList.hasNext()) {%>
				<div class="col-md-6 col-md-offset-3 mt15">
					<div class="panel panel-default">
	                	<div class="panel-body">	                		
							<h5 class="text-center text-muted">暂无教学材料</h5>
						</div>
					</div>
				</div>
			<%} else {%>
				<% 
					while(materialsList.hasNext()) {
						Document document = materialsList.next();
						String uploadfilename = document.getString("uploadfilename");
						String teachername = document.getString("teachername");
						String courseclassname = document.getString("courseclassname");
						String yearsemester = document.getString("yearsemester");
				%>
				<div class="col-md-3 mt20">
					<div class="panel" style="border-bottom:4px solid #337ab7;box-shadow: -5px -5px 5px #eee;">
						<div class="panel-body text-center">
		                  <div class="clearfix discover">
		                   	<div class="pull-left text-info">
		                         <em class="fa fa-user"></em> 教师:<%=teachername %>
		                     </div>
		                     <div class="pull-right">
			                     <a href="/jspbighomework/downloadServlet?filename=<%=uploadfilename %>">
			                     	<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="下载">
										<em class="fa fa-download"></em>
									</button>
								</a>
								<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="查看详情" onclick='showDetail("<%=uploadfilename %>", "<%=teachername %>", "<%=courseclassname %>", "<%=yearsemester %>")'>
									<em class="fa fa-search"></em>
								</button>	
		                     </div>
		                  </div>
		                  <div class="mt38 mb38">
		                  	  <a class="text-muted file-manage">
			                     <h4><em class="fa fa-file-o"></em> <%=uploadfilename %></h4>
			                  </a>
		                  </div>
		               </div>
					</div>
				</div>
				<%} %>
				<%} %>
			</div>
		</div>
	</div>
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="top:120px">
		<div class="modal-dialog" style="width: 480px">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
						&times;
					</button>
					<h4 class="modal-title" id="myModalLabel">
						教学材料信息
					</h4>
				</div>
				<div class="modal-body">
				 	<div style="padding: 5px 15px">					 	
				 		<p><em class="fa fa-file-o fontsize20 fontcolor"></em><span id="uploadfilename" class="ml20 fontsize16"></span></p>
				 		<p class="mt20"><em class="fa fa-user fontsize20 fontcolor"></em><span id="teachername" class="ml20 fontsize16"></span></p>
				 		<p class="mt20"><em class="fa fa-flag fontsize20 fontcolor"></em><span id="courseclassname" class="ml20 fontsize16"></span></p>
				 		<P class="mt20"><em class="fa fa-calendar fontsize20 fontcolor"></em><span id="yearsemester" class="ml20 fontsize16"></span></P>
				 	</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$("#myModal").modal("hide");//加载页面首先隐藏模态框，指向模态框的ID
		function showDetail(uploadfilename, teachername, courseclassname, yearsemester) {//a链接的参数
			$("#myModal").modal("show");//显示模态框
			
			//将a标签传递的参数获取到，并显示在模态框里
			document.getElementById('uploadfilename').innerHTML = "材料名称： "+uploadfilename;
			document.getElementById('teachername').innerHTML = "上传教师： "+teachername;
			document.getElementById('courseclassname').innerHTML = "相关课程： "+courseclassname;
			document.getElementById('yearsemester').innerHTML = "所属学年学期："+yearsemester;
		}
		$(function () { $("[data-toggle='tooltip']").tooltip(); });  
	</script>
</body>
</html>